<nz-card>

  <nz-row class="row">
    <span class="label required">商品名称</span>
    <input type="text" placeholder="请输入商品名称" maxlength="56" nz-input
           [(ngModel)]="formData.name">
  </nz-row>
  <nz-row class="row">
    <span class="label required">商品分类</span>
    <nz-radio-group [(ngModel)]="formData.type" [disabled]="formData.id!==''">
      <label nz-radio [nzValue]="1">实物</label>
      <label nz-radio [nzValue]="2">虚拟-积分</label>
      <label nz-radio [nzValue]="3">虚拟-礼包兑换码</label>
    </nz-radio-group>
  </nz-row>
  <nz-row class="row">
    <span class="label required">商品价格</span>
    <nz-input-number nzPlaceHolder="请输入商品价格" [nzMin]="1" [nzMax]="9999999" [nzPrecision]="2"
                     [(ngModel)]="formData.price"></nz-input-number>
  </nz-row>
  <nz-row class="row">
    <span class="label required">兑换积分</span>
    <nz-input-number nzPlaceHolder="请输入兑换积分" [nzMin]="1" [nzMax]="9999999" [nzPrecision]="0"
                     [(ngModel)]="formData.integral"></nz-input-number>
  </nz-row>
  <nz-row class="row">
    <span class="label required">排序</span>
    <nz-input-number nzPlaceHolder="请输入排序" [nzMin]="1" [nzMax]="9999999" [nzPrecision]="0"
                     [(ngModel)]="formData.sort"></nz-input-number>
  </nz-row>
  <nz-row class="row" *ngIf="formData.type===3">
    <span class="label required">兑换码</span>
    <nz-upload nzAccept=".txt"
               [nzBeforeUpload]="beforeUpload">
      <button nz-button>
        导入
      </button>
      <span style="margin-left: 4px" [nzTooltipTitle]="formData.codes.join(',')" nzTooltipPlacement="top" nz-tooltip>{{formData.codes.length ? '已导入数量 ' + formData.codes.length : '请选择txt文件'}}</span>
    </nz-upload>
    <button style="margin-left: 8px" (click)="showCodeList()" nz-button>查看已保存兑换码</button>
  </nz-row>
  <nz-row class="row" *ngIf="formData.type!==3">
    <span class="label required">库存</span>
    <nz-input-number nzPlaceHolder="请输入库存" [nzMin]="1" [nzMax]="9999999" [nzPrecision]="0"
                     [(ngModel)]="formData.stock"></nz-input-number>
  </nz-row>
  <nz-row class="row">
    <span class="label required">虚拟叠加兑换数量</span>
    <nz-input-number nzPlaceHolder="请输入虚拟叠加兑换数量" [nzMin]="1" [nzMax]="9999999" [nzPrecision]="0"
                     [(ngModel)]="formData.salesVolumeBase"></nz-input-number>
  </nz-row>
  <nz-row class="row">
    <span class="label required">兑换限制</span>
    <nz-select [(ngModel)]="formData.vipLevel" nzAllowClear nzPlaceHolder="请选择vip等级" [nzBackdrop]="true">
      <nz-option [nzValue]="0" nzLabel="V0"></nz-option>
      <nz-option [nzValue]="1" nzLabel="V1"></nz-option>
      <nz-option [nzValue]="2" nzLabel="V2"></nz-option>
      <nz-option [nzValue]="3" nzLabel="V3"></nz-option>
      <nz-option [nzValue]="4" nzLabel="V4"></nz-option>
      <nz-option [nzValue]="5" nzLabel="V5"></nz-option>
      <nz-option [nzValue]="6" nzLabel="V6"></nz-option>
      <nz-option [nzValue]="7" nzLabel="V7"></nz-option>
      <nz-option [nzValue]="8" nzLabel="V8"></nz-option>
      <nz-option [nzValue]="9" nzLabel="V9"></nz-option>
      <nz-option [nzValue]="10" nzLabel="V10"></nz-option>
      <nz-option [nzValue]="11" nzLabel="V11"></nz-option>
      <nz-option [nzValue]="12" nzLabel="V12"></nz-option>
    </nz-select>
  </nz-row>
  <nz-row class="row">
    <span class="label required selfTop">商品主图</span>
    <app-image-upload style="width: 250px;display: inline-block"
                      [maxImgLength]="1"
                      [imageUrl]="formData.icon"
                      (deleteImg)="formData.icon=''"
                      (urlChange)="formData.icon=$event"></app-image-upload>
  </nz-row>
  <nz-row class="row">
    <span class="label required selfTop">商品列表图</span>
    <span style="display: inline-block;max-width: 1080px;overflow-x: auto">
        <app-image-upload [addFileArea]="true"
                          [imageUrls]="formData.imgs"
                          (deleteImg)="removeImg($event,'imgs')"
                          (urlChange)="appendImg($event,'imgs')"
                          [maxWidth]="'2400px'"
                          [dragDisabled]="false"
                          [maxImgLength]="9"></app-image-upload>
        </span>
  </nz-row>
  <nz-row class="row">
    <span class="label required selfTop">商品详情图</span>
    <span style="display: inline-block;max-width: 1080px;overflow-x: auto">
        <app-image-upload [addFileArea]="true"
                          [imageUrls]="formData.introduction"
                          (deleteImg)="removeImg($event,'introduction')"
                          (urlChange)="appendImg($event,'introduction')"
                          [maxWidth]="'2400px'"
                          [dragDisabled]="false"
                          [maxImgLength]="9"></app-image-upload>
        </span>
  </nz-row>

  <div class="footer">
    <button nzDanger nz-button routerLink="/promotionshare/operate-mall" nzType="default">返回</button>
    <button nz-button nzType="primary" (click)="submit()">保存</button>
  </div>

</nz-card>

<nz-modal
  [nzVisible]="codeListModal.visible"
  [nzContent]="modalContent"
  nzTitle="已保存兑换码"
  nzWidth="800px"
  [nzFooter]="null"
  (nzOnCancel)="hideCodeList()"
>
  <ng-template #modalContent>

    <nz-row>
      <div class="searchItem">
        <label>状态：</label>
        <nz-select [(ngModel)]="codeListModal.query.state" nzPlaceHolder="全部" [nzBackdrop]="true" nzAllowClear
                   nzShowSearch>
          <nz-option [nzValue]="0" nzLabel="未兑换"></nz-option>
          <nz-option [nzValue]="1" nzLabel="已兑换"></nz-option>
        </nz-select>
      </div>
      <div class="searchItem">
        <button nz-button nzType="primary" (click)="queryBtn()">查询</button>
      </div>
    </nz-row>
    <!--表格-->
    <nz-table
      style="margin-top: 8px"
      #table
      nzSize="small"
      nzShowSizeChanger
      nzShowQuickJumper
      nzOuterBordered
      [nzData]="codeListModal.table.records"
      [nzPageSizeOptions]="[5, 10, 20, 50, 100]"
      [nzTotal]="codeListModal.table.total"
      [(nzPageIndex)]="codeListModal.query.page"
      [(nzPageSize)]="codeListModal.query.pageSize"
      [nzFrontPagination]="false"
      [nzShowTotal]="totalTemplate"
      (nzPageIndexChange)="onPageIndexChange($event)"
      (nzPageSizeChange)="onPageSizeChange($event)"
    >
      <thead>
      <tr>
        <th nzAlign="center">兑换码</th>
        <th nzAlign="center">状态</th>
        <th nzAlign="center">操作</th>
      </tr>
      </thead>
      <tbody>
      <tr *ngFor="let data of table.data;let index=index;">
        <td nzAlign="center">{{ data['code'] }}</td>
        <td nzAlign="center">{{ data['state'] === 0 ? '未兑换' : '已兑换' }}</td>
        <td nzAlign="center">
          <a *ngIf="data['state']===0" style="color: red" nz-popconfirm nzPopconfirmTitle="确认要删除吗?" (nzOnConfirm)="deleteCode(data['id'])">删除</a>
          <span *ngIf="data['state']===1">-</span>
        </td>
      </tr>
      </tbody>
    </nz-table>
    <!-- 分页template -->
    <ng-template #totalTemplate let-total>共有 {{total }} 条</ng-template>
  </ng-template>
</nz-modal>
